/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
    Platform,
    ScrollView
} from 'react-native';

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');


var DCHomeDetail = require('./DCHomeDetail');
var TopView = require('./DCTopView');
var MiddleView = require('./DCHomeMiddleView');
var MiddleBottomView = require('./DCMiddleBottomView');
var ShopCenter = require('./DCShopCenter');
var ShopCenterDetail = require('./DCShopCenterDetail');
var GeustYouLike = require('./DCGeustYouLike');

var DCHome = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {/*首页的导航条*/}
                {this.renderNavBar()}
                {/*首页的主要内容*/}
                <ScrollView>
                    {/*头部的View*/}
                    <TopView />
                    {/*中间的内容*/}
                    <MiddleView />
                    {/*中间下半部分的内容*/}
                    <MiddleBottomView
                        popTopHome={(data)=>{this.pushToDetail(data)}}
                    />
                    {/*购物中心*/}
                    <ShopCenter
                        popToHomeView = {(url) => this.pushToShopCenterDetail(url)}
                    />
                    {/*猜你喜欢*/}
                    <GeustYouLike />
                </ScrollView>
            </View>
        );
    },

    //首页的导航条
    renderNavBar(){
        return(
            <View style={styles.navBarStyle}>
                {/*左边*/}
                <TouchableOpacity onPress={()=>{alert('点击了')}}>
                    <Text style={{color:'white'}}>广州</Text>
                </TouchableOpacity>
                {/*中间*/}
                <TextInput
                    placeholder="输入商家,品类,商圈"
                    style={styles.topInputStyle}
                />

                {/*右边*/}
                <View style={styles.rightNavViewStyle}>
                    <TouchableOpacity onPress={()=>{alert('点击了')}}>
                        <Image source={{uri: 'icon_homepage_message'}} style={styles.navRightImageStyle} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{alert('点击了')}}>
                        <Image source={{uri: 'icon_homepage_scan'}} style={styles.navLeftImageStyle} />
                    </TouchableOpacity>
                </View>
            </View>
        )
    },

    // 跳转到购物中心详情页
    pushToShopCenterDetail(url){
        this.props.navigator.push(
            {
                component: ShopCenterDetail, // 要跳转的版块
                passProps: {'url': this.dealWithUrl(url)}
            }
        );
    },

    // 处理URL
    dealWithUrl(url){
        return url.replace('imeituan://www.meituan.com/web/?url=', '');
    },

    //跳转到二级页面
    pushToDetail(data){
        // alert(data);
        this.props.navigator.push({
            component:DCHomeDetail, //要跳转的页面
            title:'详情页'
        });
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    rightNavViewStyle:{
        flexDirection:'row',
        // backgroundColor:'blue',
        height:64,
        //设置侧轴对齐方式
        alignItems:'center',
    },
    topInputStyle: {  //设置输入框
        width:width * 0.7,
        height:Platform.OS === 'ios' ? 35 : 30,
        backgroundColor:'white',
        marginTop:Platform.OS === 'ios' ? 16 : 0,

        //设置圆角
        borderRadius:18,

        //设置内左边距
        paddingLeft:10,
    },
    navRightImageStyle: { //设置图片大小
        width: Platform.OS === 'ios' ? 28 : 24,
        height: Platform.OS === 'ios' ? 28 : 24,
    },
    navLeftImageStyle: {
        width: Platform.OS === 'ios' ? 28 : 24,
        height: Platform.OS === 'ios' ? 28 : 24,
    },
    navBarStyle: {  //导航条样式
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1.0)',

        //改变主轴方向
        flexDirection: 'row',

        //垂直居中--->设置侧轴的对齐方式
        alignItems: 'center',

        //设置主轴对齐方式
        justifyContent:'space-around'
    }
});

//输出组件类
module.exports = DCHome;